<template>
  <div>
    <el-dialog :title="dialogData.title"
               :visible.sync="dialogData.show"
               center
               @close="$emit('closedialog')"
               :close-on-click-modal='false'>
      <el-button @click="handle(0,0)"
                 type="primary">新 增</el-button>
      <el-table :data="tableData"
                border
                style="width: 100%"
                class="mt-20">
        <el-table-column prop="branchName"
                         label="分院名称"></el-table-column>
        <el-table-column align="center"
                         prop="area"
                         label="地区"></el-table-column>
        <el-table-column align="center"
                         prop="address"
                         label="详细地址"></el-table-column>
        <el-table-column align="center"
                         prop="longitude"
                         label="经度"></el-table-column>
        <el-table-column align="center"
                         prop="latitude"
                         label="纬度"></el-table-column>
        <el-table-column align="center"
                         width="180"
                         label="操作">
          <template slot-scope="scope">
            <el-button type="primary"
                       @click="handle(1,scope.row)">编 辑</el-button>
            <el-button type="danger"
                       @click="handle(8,scope.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page @getList="_getList"
            :pageTotal="pageTotal"
            ref="page"></page>

    </el-dialog>
    <div v-if="dialogDD">
      <el-dialog :visible.sync="dialogDD"
                 center
                 @close="close"
                 :title="title"
                 :close-on-click-modal='false'>
        <el-form ref="formRefs"
                 :model="form"
                 :rules="formRules"
                 label-width="100px">
          <el-form-item label="分院名称："
                        prop="branchName">
            <el-input v-model="form.branchName"
                      style="width:70%"
                      placeholder="请输入分院名称"
                      maxlength="50"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="6">
              <el-form-item label="地区："
                            prop="provinceId">
                <el-select v-model="form.provinceId"
                           class="w-200"
                           clearable
                           @change="selectChildren1"
                           placeholder="请选择省">
                  <el-option v-for="item in provinceList"
                             :value="item.id"
                             :label="item.name"
                             :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="cityId">
                <el-select v-model="form.cityId"
                           class="w-200"
                           placeholder="请选择市"
                           clearable
                           @change="selectChildren2">
                  <el-option v-for="item in cityList"
                             :value="item.id"
                             :label="item.name"
                             :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="districtId">
                <el-select v-model="form.districtId"
                           class="w-200"
                           clearable
                           placeholder="请选择区"
                           @change="selectChildren3">
                  <el-option v-for="item in districtList"
                             :value="item.id"
                             :label="item.name"
                             :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="详细地址："
                        prop="address">
            <el-input v-model="form.address"
                      style="width:70%"
                      maxlength="50"
                      clearable
                      placeholder="请输入详细地址"
                      @change="chagneAddress"
                      @clear="clearAddress"
                      :disabled="(form.provinceId !=='' && form.districtId !== '' && form.cityId !== '') ? false : true"></el-input>
          </el-form-item>
          <el-form-item label="经度："
                        prop="longitude">
            <el-input v-model="form.longitude"
                      style="width:70%"
                      placeholder="请输入经度"
                      maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="纬度："
                        prop="latitude">
            <el-input v-model="form.latitude"
                      style="width:70%"
                      placeholder="请输入纬度"
                      maxlength="50"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary"
                     @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    props: ['dialogData'],
    data () {
      return {
        tableData: [],
        pageTotal: 0,
        dialogDD: false,
        title: '新增分院',
        form: {
          branchName: null,
          provinceId: null,
          cityId: null,
          districtId: null,
          address: null,
          longitude: '',
          latitude: ''
        },
        provinceList: [],
        districtList: [],
        cityList: [],
        formRules: {
          branchName: [{ required: true, message: '请输入分院名称', trigger: 'blur' }],
          provinceId: [{ required: true, message: '请选择省', trigger: 'chagne' }],
          cityId: [{ required: true, message: '请选择市', trigger: 'chagne' }],
          districtId: [{ required: true, message: '请选择区', trigger: 'chagne' }],
          address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
          longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
          latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
        }
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page
    },
    methods: {
      clearAddress () {
        this.form.longitude = '';
        this.form.latitude = '';
      },
      chagneAddress () {
        if (!this.form.address) {
          this.$message.error('请输入详细地址!');
          return
        }
        let pa = {
          area: this.provinceList.filter(res => res.id == this.form.provinceId)[0].name +
            this.cityList.filter(res => res.id == this.form.cityId)[0].name +
            this.districtList.filter(res => res.id == this.form.districtId)[0].name,
          address: this.form.address
        }
        this.post(this.api.cooperationHospital.getLongitudeAndLatitude, pa).then(res => {
          if (res.data.code === '200') {
            let resData = res.data.object;
            if (!resData.latitude || !resData.longitude) {
              this.$message.warning('暂未查询到具体经纬度信息，请手动输入')
            } else {
              this.form.latitude = resData.latitude;
              this.form.longitude = resData.longitude;
            }
          }

        })
      },
      close () {
        this.form = {};
        this.dialogDD = false;
      },
      selectChildren1 (obj) {
        this.form.cityId = '';
        this.form.districtId = '';
        this.form.address = '';
        this.form.longitude = '';
        this.form.latitude = '';
        this.post(this.api.baseArea, { "id": obj }).then((res) => {
          if (res.data.code === '200') {
            if (obj === 0) {
              this.provinceList = res.data.object;
            } else {
              this.cityList = res.data.object;
            }
          }
        });
      },
      // 选择市
      selectChildren2 (obj) {
        this.form.cityId = obj;
        this.form.districtId = '';
        this.form.address = '';
        this.form.longitude = '';
        this.form.latitude = '';
        this.post(this.api.baseArea, { "id": obj }).then((res) => {
          if (res.data.code === '200') {
            this.districtList = res.data.object;
          }
        });
      },
      // 选择区
      selectChildren3 (obj) {
        this.form.districtId = obj;
        this.form.address = '';
        this.form.longitude = '';
        this.form.latitude = '';
      },
      onSubmit () {
        this.form.hospitalId = this.dialogData.info.id;
        this.$refs.formRefs.validate((valid) => {
          if (valid) {
            var longrg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
            if (!longrg.test(this.form.longitude)) {
              this.$message.warning('经度整数部分为0-180,小数部分为0到6位!')
              return
            }
            var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
            if (!latreg.test(this.form.latitude)) {
              this.$message.warning('纬度整数部分为0-90,小数部分为0到6位!')
              return
            }
            this.post(this.api.cooperationHospital.uploadHospitalBranch, this.form).then(res => {
              if (res.data.code === '200') {
                this.close();
                this._getList();
              }
            })
          }
        })

      },
      handle (index, row) {
        switch (index) {
          case 1:
            this.dialogDD = true;
            this.title = '编辑分院';
            this.post(this.api.cooperationHospital.getHospitalBranchDetail, { id: row.id }).then(res => {
              this.selectChildren1(0);
              this.selectChildren1(res.data.object.provinceId);
              this.selectChildren2(res.data.object.cityId);
              this.form = res.data.object;
            })
            break
          case 8:
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.post(this.api.cooperationHospital.deleteHospitalBranch, { id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(res.data.message);
                  this._getList();
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            });
            break
          case 0:
            this.dialogDD = true;
            this.title = '新增分院'
            this.selectChildren1(0);
            break
        }
      },
      _getList () {
        this.post(this.api.cooperationHospital.getHospitalBranchPage,
          { hospitalId: this.dialogData.info.id, pageIndex: this.page.pageIndex, pageSize: this.page.pageSize }).then((res) => {
            if (res.data.code === '200') {
              this.tableData = res.data.object;
              this.pageTotal = res.data.totalNum;
            }
          })
      }
    },
    mounted () {
      this._getList();
    }
  }
</script>

<style>
</style>